<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">我的问题</view>
		</view>
		<view class="body">
			<view class="body-piece" v-for="item,index in questionlist" :key="index">
				<view class="body-piece-headr">
					<view class="body-piece-headr-icon studentsvg"  v-if="item.type=='问'||item.type=='追问'"></view>
					<view class="body-piece-headr-icon teachersvg"  v-if="item.type=='答'||item.type=='追答'"></view>
					<view class="body-piece-headr-name">{{item.name}}</view>
					<view class="body-piece-headr-studio">{{item.studio}}</view>
				</view>
				<view class="body-piece-body" v-if="item.text==[]">
					{{item.type}}:
				</view>
				<view class="body-piece-body" v-else>
					<view v-for="item2,index2 in item.text" :key="index2">{{item.type}}:{{item2}}</view>
				</view>
				<view class="body-piece-body"  v-if="item.picture">
					<img v-for="item3,index3 in item.picture" :key="index3" class="body-piece-body-img" :src='item3'>
				</view>
				<view class="body-piece-footer">
				</view>
			</view>
			<view class="questionclosely" v-if="isasked">追问</view>
		</view>
		<view class="footer">
			<view class="footer-button" @click="returnclick()">返回</view>
		</view>
	</view>
</template>

<script>
	import { getEvaluateEvaluate } from "@/api/mine/index";
	export default {
		data() {
			return {
				questionlist: [],
				time: '10:00',
				timer: null,
				isasked: false,
			}
		},
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					console.log("newval",newval)
					this.Initialize()
				}
			},
		},
		created() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				this.dealdata(this.$store.state.user.myquestion)
			},
			dealdata(data){
				console.log("data",data)
				let list = []
				let text = []
				let text2 = []
				text = data.question.split('|')
				text2 = data.wordAnswer.split('|')
				console.log("text",text)
				list.push({
					name:  data.studentName, 
					text: text, 
					type: '问', 
					studio: '',
					
				})
				list.push({
					name:  data.teacherName, 
					text: text2, 
					type: '答', 
					studio: data.studioName,
					
				})
				this.questionlist = list
			},
			returnclick(){
				this.$router.push('/pages/aqc/result')
			},
		}
	}
</script>

<style>
	.container {
		font-size: 4vw;
		background-color: #F6F7F8;
		width: 100vw;
		/* height: 87.3vh; */
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw 1fr auto;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid #F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	.body-piece{
		margin: 4vw auto 0 auto;
		width: 90%;
		min-height: 30vw;
		background: #ffffff;
		border-radius: 2vw;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-rows: 10vw auto 2vw;
	}
	.body-piece-headr{
		margin: 0 0 0 5%;
		width: 90%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-column-gap: 1vw;
		grid-template-columns: auto auto 1fr;
	}
	.body-piece-headr-icon{
		width: 8vw;
		height: 8vw;
	}
	.studentsvg{
		background: url(../../static/mine/student.svg);
		background-size: 100% 100%;
	}
	.teachersvg{
		background: url(../../static/mine/teacher.svg);
		background-size: 100% 100%;
	}
	.body-piece-headr-name{
		color: #363A44;
	}
	.body-piece-headr-studio{
		color: #B3B5B9;
		width:100%;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
	.body-piece-body{
		margin: 0 0 0 5%;
		width: 90%;
		color: #515257;
	}
	.decoration{
		text-decoration: line-through
	}
	.questionclosely{
		float: right;
		margin: 5vw 5vw 0 0;
		width: 16vw;
		height: 8vw;
		border-radius: 4vw;
		color: #ffffff;
		background: #1492FF;
		display: grid;
		justify-items: center;
		align-items: center;
		cursor: pointer;
	}
	.body-piece-footer{
		margin: 0 0 0 5%;
		width: 90%;
		color: #B3B5B9;
	}
	.footer{
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
	}
	.footer-button{
		margin: 1vw 0 1vw 0;
		width: 70vw;
		height: 10vw;
		border-radius: 5vw;
		color: #ffffff;
		background: #00B578;
		display: grid;
		justify-items: center;
		align-items: center;
		cursor: pointer;
		
	}
</style>